<template>
	<view class="outer_box">
		<view class="search-box">
			<image src="https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/index/sousuo.png" @tap="select"></image>
			<input type="text" value="" confirm-type="search" @confirm="confirm" v-model="goodsName" placeholder="搜索您要购买的商品或服务" placeholder-style="color: #CCCCCC;" />
		</view>
		<!-- 商品分类 -->
		<view class="category">
			<view class="" @tap="changeCategory(-1)">
				<view :class="category==-1?'activate':''">健康服务</view>
				<view :class="category==-1?'line':''"></view>
			</view>
			<view class="" @tap="changeCategory(2)">
				<view :class="category==2?'activate':''">乐活产品</view>
				<view :class="category==2?'line':''"></view>
			</view>

		</view>
		<!-- 滑动区域 -->
		<view class="">
			<view :style="{height:height+'px'}">
				<view class="swiper-item">
					<scroll-view scroll-y="true" :style="{height:height+'px'}" :refresher-triggered=refresherTriggered :refresherThreshold=refresherThreshold
										@refresherrefresh='refresherrefresh()' @scrolltolower='nextPage()'
										lower-threshold="500">
						<image class="img1" v-if="category==-1" src="https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/index/banner@2x.png" mode="widthFix"></image>
						<image class="img1" v-if="category==2" src="https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/index/banner@2x (1).png" mode="widthFix"></image>
						<view class="product" v-if="homePageList.length!==0">
							<view class="product-list" v-for="(item,index) in homePageList" @tap="jumpInfo(item)">
								<image class="image" :src="item.logo" mode=""></image>
								<view class="">
									{{item.name}}
								</view>
								<view class="">
									￥{{item.price}}
								</view>
							</view>
							
						</view>
						<view class="productnull" v-if="homePageList.length==0">
							<image class="null_img" src="https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/index/zusp@2x.png" mode=""></image>
							<view class="null_text">
								暂无商品
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				homePageList1:[],
				goodsName:'',
				pageNum: 1,
				pageSize: 10,
				isNull: false,
				hasNextPage: true,
				refresherThreshold: 50,
				refresherTriggered: false,
				_refresherTriggered: false,
				homePageList:[],
				category: -1,
				height: 500,
				productInfo:{
					title:'进口苹果',
					image:'https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/login/logo.png',
					sku:'1000g',
					price:'30'
				}
			}
		},

		onLoad() {
			// this.changeCategory(1)
		},
		onShow() {
			this.changeCategory(-1)
		},
		onReady() {
			uni.getSystemInfo({
				success: (res) => {
					this.height = res.windowHeight - uni.upx2px(150)

				}
			})
		},
		methods: {
			confirm(){
				// var val = this.InpValue
				// if (val >= 0) {
				// 	console.log('数字')
				// 	this.type = 1
				// }else{
				// 	console.log('hanzi')
				// 	this.type = 2
				// }
				this.select()
			},
			//跳转商品详情
			jumpInfo(item){
				if(item.isDispatching==-1){
					uni.navigateTo({
						url:'server-product-Info?goodsId='+item.goodsId+'&isDispatching='+item.isDispatching
					})
				}else if(item.isDispatching==2){
					uni.navigateTo({
						url:'productInfo?goodsId='+item.goodsId+'&isDispatching='+item.isDispatching
					})
				}
			},
			nextPage() {
				let _this = this
				console.log("====出发底部===")
				console.log("====出发底部===" + this.pageNum)
				console.log("====出发底部===" + this.hasNextPage)
				if (this.hasNextPage) {
					this.pageNum = this.pageNum + 1
					this.$api.getfrontPage({
						isDispatching:this.category
					}, this.pageNum, this.pageSize).then((res) => {
						if (res.data.code == 200) {
							// console.log("-----"+JSON.stringify(this.orderList))
							for (var i = 0; i < res.data.dataMap.list.length; i++) {
								_this.homePageList.push(res.data.dataMap.list[i])
							}
							_this.hasNextPage = res.data.dataMap.hasNextPage
			
						}
					})
				}
			
			},
			refresherrefresh() {
				console.log("自定义下拉刷新被触发");
				let _this = this;
				if (_this._refresherTriggered) {
					return;
				}
				_this._refresherTriggered = true;
				//界面下拉触发，triggered可能不是true，要设为true
				if (!_this.refresherTriggered) {
					_this.refresherTriggered = true;
				}
				this.getfrontPage(this.category)
				setTimeout(() => {
					_this.refresherTriggered = false; //触发onRestore，并关闭刷新图标
					_this._refresherTriggered = false;
				}, 1500)
			
			},
			changeCategory(category) {
				this.category = category
				this.getfrontPage(category)
			},
			//搜索数据
			select(){
				this.getfrontPage(this.category)
			},
			// 获取首页列表数据
			async getfrontPage(category){
				this.hasNextPage = true
				this.pageNum = 1
				this.homePageList = []
				await this.$api.getfrontPage({
					isDispatching:category,
					goodsName:this.goodsName
				},this.pageNum,this.pageSize).then((res) => {
					if (res.data.code == 200) {
						console.log(res.data.dataMap)
						this.homePageList = res.data.dataMap.list
						console.log(this.homePageList.length)
						this.homePageList1 = res.data.dataMap
						// this.goodsName = ''
					}
				})
			},
			//购物车添加
			 async addSubtractProduct(status, product, index) { //goodsId
				 await this.$api.addSubtractProduct({
					goodsId: product.goodsId,
					status: status
				}).then((res) => {
					if (res.data.success) {
						this.getfrontPage(this.category)
						// this.calculateNumberById(product.goodsId,status)
						// //刷新购物车
						// this.pupUpList()
						
					}else{
						if(res.data.code !=20001 || res.data.code != 20002){
							uni.showToast({
								title: res.data.message,
								duration: 1000,
								icon: "none"
							});
						}
						// uni.showToast({
						// 	title: res.data.msg,
						// 	duration: 1000,
						// 	icon: "none"
						// });	
					}
			
				})
			
			},
			//根据id增加数量
			calculateNumberById(goodsId,number){
				for (var i = 0; i < this.list.length; i++) {
					for (var j = 0; j < this.list[i].data.length; j++) {
						if(this.list[i].data[j].goodsId==goodsId){
							this.list[i].data[j].number+=number
							if(this.list[i].data[j].number<0){
								this.list[i].data[j].number=0
							}
						}
					}
				}
				
			},
			//购物车价格数量计算
			calculateCart(){
				for (var i = 0; i < this.cartList.length; i++) {
					this.cartList[i]
				}
			},
			//列表价格数量计算
			calculate(){
				let totalPrice = 0
				let totalNumber = 0
				for (var i = 0; i < this.list.length; i++) {
					for (var j = 0; j < this.list[i].data.length; j++) {
						totalPrice+= this.list[i].data[j].price*this.list[i].data[j].number
						totalNumber+= this.list[i].data[j].number
					}
				}
				this.totalPrice = totalPrice
				this.totalNumber = totalNumber
				if(this.totalNumber>0){
					this.cartActive = true
				}else{
					this.cartActive = false
				}
				console.log("总价格："+totalPrice)
				console.log("总数量："+totalNumber)
			},
		}
	}
</script>

<style lang="less" scoped>
	.productnull{
		margin-top: 50rpx;
		text-align: center;
		.null_img{
			width: 323rpx;
			height: 313rpx;
			
		}
		.null_text{
			font-size: 24rpx;
			font-weight: 400;
			color: #999999;
			line-height: 48rpx;
		}
	}
	.product{
		width: 690rpx;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		.product-list{
			margin-top: 30rpx;
			width: 330rpx;
			min-height: 440rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			padding-bottom: 20rpx;
			.image{
				width: 330rpx;
				height: 330rpx;
				border-radius: 16rpx 16rpx 0rpx 0rpx;
			}
			view:nth-child(2){
				width: 300rpx;
				margin: 0 auto;
				font-size: 28rpx;
				font-weight: 500;
				color: #333333;
				line-height: 36rpx;
				display:-webkit-box;/**对象作为伸缩盒子模型展示**/
				-webkit-box-orient:vertical;/**设置或检索伸缩盒子对象的子元素的排列方式**/
				-webkit-line-clamp:2;/**显示的行数**/
			    overflow:hidden;/**隐藏超出的内容**/
			}
			view:nth-child(3){
				margin-top: 10rpx;
				margin-left: 6rpx;
				font-size: 36rpx;
				font-weight: bold;
				color: #FF8308;
				line-height: 36rpx;
			}
		}
	}
	.outer_box {
		padding: 20rpx 30rpx 0 30rpx;
		background-color: #F8f8f8;
		.swiper-item {

			.productInfo {
				display: flex;
				margin-bottom: 20rpx;
				.image{
					width: 160rpx;
					height: 160rpx;
					border-radius: 12rpx;
					margin-right: 20rpx;
				}
				.productInfo_right {
					width: 500rpx;
				}
				.sku {
					color: #999999;
					font-size: 24rpx;
					margin-top: 18rpx;
				}
				.price{
					font-size: 36rpx;
					font-weight: bold;
					color: #FF8308;
				}
				.right{
					margin-top: 10rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
				.cart-btn {
					width: 190rpx;
					height: 60rpx;
					background-color: #FFBD66 !important;
					border-radius: 30rpx;
					color: #FFFFFF;
					text-align: center;
					line-height: 60rpx;
				}
				.nth-child1{
					margin-top: 7rpx;
					color: #333333;
					font-size: 28rpx;
					font-weight: bold;
				}
			}

			.product-box {
				display: flex;

				.cart-number {
					display: flex;
					align-items: center;

					image {
						width: 48rpx;
						height: 48rpx;
					}

					view:nth-child(2) {
						width: 75rpx;
						height: 48rpx;
						background: #FAF7F5;
						border-radius: 12rpx;
						text-align: center;
						line-height: 48rpx;
					}
				}

				.product-image {
					flex: 1;

					image {
						width: 160rpx;
						height: 160rpx;
					}
				}

				.product-info {
					flex: 2;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					margin-left: 10rpx;

					view:nth-child(1) {
						color: #333333;
						font-size: 28rpx;
					}

					view:nth-child(2) {
						color: #999999;
						font-size: 24rpx;
					}

					view:nth-child(3) {
						color: #FF8308;
						font-size: 36rpx;
					}
				}



			}

			.img1 {
				width: 690rpx;
				border-radius: 12rpx;

			}

		}

		.category {
			display: flex;
			margin: 10rpx 0;
			height: 73rpx;
			line-height: 54rpx;
			.activate {
				color: #FFBD66;
			}

			.line {
				margin: 10rpx auto 5rpx auto;
				width: 80rpx;
				height: 6rpx;
				background-color: #FFBD66;
				border-radius: 3rpx;
			}

			view {
				flex: 1;
				text-align: center;
			}

		}

		.search-box {
			display: flex;
			align-items: center;
			margin: 0 auto;
			height: 70rpx;
			background: #FFFFFF;
			border: 2rpx solid #EEEEEE;
			border-radius: 35rpx;

			image {
				margin: 20rpx;
				width: 44rpx;
				height: 44rpx;
			}
		}
	}
</style>
